<template>
    <div id="searchPage">
        <form action="/">
            <van-search
            v-model="searchText"
            show-action
            placeholder="请输入标签进行搜索"
            @search="onSearch"
            @cancel="onCancel"
            />
        </form>
        <van-divider content-position="left">已选标签</van-divider>
        <div v-if="TagIds.length===0">
            请选择标签
        </div>
        <van-row gutter="20" style="padding: 0 16px;">
            <van-col v-for="tag in TagIds" :key="tag" >
                <van-tag closeable size="medium" type="primary" @close="close(tag)">
                    {{ tag }}
                </van-tag>
            </van-col>
        </van-row>
        
        <van-divider content-position="left">选择标签</van-divider>
        <van-tree-select 
        v-model:active-id="TagIds" 
        v-model:main-active-index="TagIndex"
        :items="Tagitems"
        />
        <div>
            <van-button style="width: 80%;" type="primary" @click="doSearch">搜索</van-button>
        </div>
    </div>
</template>

<style scoped>
</style>

<script setup>

import { onMounted, ref, watch } from 'vue';
import { showFailToast, showToast } from 'vant';
import { useRouter } from 'vue-router';
import Myaxios from '../plugins/MyAxios';

const searchText = ref('');
const TagIds = ref([]);
const TagIndex = ref();
const originalTagItems = [
    {
        text: '性别',
        children: [
            { text: '男', id: '男' },
            { text: '女', id: '女' },
            { text: '男1', id: '男1' },
            { text: '女2', id: '女2' },
        ],
    },
        {
        text: '年级',
        children: [
            { text: '大一', id: '大一' },
            { text: '大二', id: '大二' },
            { text: '大三', id: '大三' },
            { text: '大1', id: '大1' },
            { text: '大2', id: '大2' },
            { text: '大3', id: '大3' },
        ],
    },
]
let Tagitems = ref(originalTagItems);
const router = useRouter();

onMounted( async () => {
    const res = await Myaxios.post("/listTags");
    if(res.data.code === 200){
         // 清空 originalTagItems
         originalTagItems.length = 0;

        // 将接口返回的标签信息加入 originalTagItems
        const tags = res.data.data; // 假设这是返回的标签数组
        tags.forEach(tag => {
            originalTagItems.push({
                text: tag.parentTagName,
                children: tag.childrenTagsName.map(child => ({ text: child, id: child }))
            });
        });

        // 更新 Tagitems
        Tagitems.value = [...originalTagItems];
    }
    else{
        showFailToast("系统繁忙，请稍后重试");
    }
})


const onSearch = (val) => {
    Tagitems.value = originalTagItems.map(item => {
        const tempChildren = [...item.children];
        const tempItem = {...item};
        tempItem.children = tempChildren.filter(child => {return child.text.includes(searchText.value)});
        return tempItem;
    });
};

watch(searchText,onSearch)
const onCancel = () => {
    searchText.value = "";
    Tagitems.value = originalTagItems;
};
const close = (tag) => {
    TagIds.value = TagIds.value.filter((item) => {
        return item !== tag
    })
};

const doSearch = ()=>{
    router.push({
        path: '/search/result',
        query:{
            tags: TagIds.value,
        }
    });
}

</script>
